<style>
	textarea{outline:none;resize:none;}
</style>
<link rel="stylesheet" href="../js/select2/select2.min.css" />
<script type="text/javascript" src="../js/select2/select2.min.js"></script>
<div id="tmp"  xmlns:v-bind="http://www.w3.org/1999/xhtml"
	 style="width: 100%;height: 250px;margin-top: -13px;margin-bottom: -25px;">
	<form onsubmit="return false;">
		<div class="form-group col-md-6">
			<label>分类名称</label>
			<input type="text" class="form-control" name="title"
				   placeholder="分类名称……" onkeyup="check_title(this)">
			<span style="color: red;" v-text="e_title">测试</span>
		</div>
		<div class="form-group col-md-6">
			<label>所属主分类</label>
			<select id="mainType" class="form-control">
				<option v-for="(item,index) in mainTypes"
						v-bind:value="item.id" v-text="item.typename"></option>
			</select>
		</div>
		<script>
            var check_title = function (obj) {
                if(!verifyStringLength($.trim($(obj).val()),3,20)){
                    tmp.e_title = '标题的长度范围3-20';
                    return;
                }
                if(!verify($.trim($(obj).val()),'nickname')){
                    tmp.e_title = '只能包含字母、数字、下划线、空格、中文(不含中文标点符号)';
                    return;
                }
                if(isEmpty($.trim($(obj).val()))){
                    tmp.e_title = '标题不能为空……';
                    return;
                }else{
                    tmp.e_title = '';
                }
            }

            var check_desc = function (obj) {
                if(!verifyStringLength($(obj).val(),5,100)){
                    tmp.e_desc = '描述长度范围5-100';
                }else{
                    tmp.e_desc = '';
                }
            }
		</script>
		<div class="form-group col-md-12">
			<label >分类描述</label>
			<textarea class="form-control" rows="4" name="desc"
					  placeholder="分类描述……" onkeyup="check_desc(this)"></textarea>
			<span style="color: red;" v-text="e_desc">类别描述提示</span>
		</div>
	</form>
</div>
<script>
    var tmp = new Vue({
        el: '#tmp',
        data: {e_desc:'描述的长度范围5-100',e_title:'标题长度范围3-20',child:[],mainTypes:[]},
        methods:{
        }
    });
    var getMainType = function () {
        $.ajax({
            type: 'post',
            url: 'getRootMainType',
            success: function (data) {
                tmp.mainTypes = data;
            }
        });
    }
    //判读是否登录，没登录，重新加载
    var is_login = function (url,callback) {
        var url = url || '../isRoot';
        $.ajax({
            type:'post',
            url:url,
            success:function (result) {
                if(!result){
                    location.reload();
                    return false;
                }else {
                    if(typeof callback == "function"){
                        callback();
                    }
                    return true;
                }
            }
        });
    }

    $(function () {
        var style = 'position: fixed; top: 0px; display: block; padding-left: 17px;';
        $("div[role=dialog]").attr("style", style);
        is_login();
        getMainType();
    });
</script>